<template>
    <div class="row">
        <!-- 用户列表 -->
        <div class="card" 
        v-show="info.users.length" 
        v-for="user in info.users" 
        :key="user.login"
        >
            <a :href="user.html_url" target="_blank">
                <img :src="user.avatar_url" style='width:100px'/>
            </a>
            <p class="card-text">{{user.login}}</p>
        </div>
        <!-- 欢迎词 -->
        <h1 v-show="info.isFirst">欢迎搜索用户信息！</h1>
        <!-- 加载中 -->
        <h1 v-show="info.isLoading">数据正在加载中...</h1>
        <!-- 错误信息 -->
        <h1 v-show="info.errorMsg">{{info.errorMsg}}</h1>
    </div>
</template>

<script>
    export default {
        name:'UserList',
        data() {
            return {
                info:{
                    // 是否为第一次展示，默认为true（当请求成功 或 数据正在加载时，isFist为false）
                    isFirst:true, 
                    // 是否为数据加载状态，默认为false（当数据加载需要一段时间时为true）
                    isLoading:false,
                    // 请求错误信息
                    errorMsg:'', 
                    // 搜索到的用户信息列表
                    users:[],
                }
            }
        },
        methods:{
            // 获取是否初始加载状态、是否正在加载、错误信息、用户数据列表（Search组件控制这四个值）
            updateListData(dataObj){
                console.log(dataObj);
                /*
                [ES6赋值]
                    语法：this.xxx = {...this.xxx ,...data};  //参数1是将当前对象中的值重新赋值一次；参数2是接收到的数据。
                    作用：如果接收到的参数2封装的数据中比参数1少了一个或者几个数据，那么少掉的这个数据原来是什么就是什么，不会被破坏和删除。
                    意义：为了不破坏组件中原先定义的属性。（如果接收到的参数比原先少，那么少掉的这个属性会自动被删除。）
                */
                this.info = {...this.info ,...dataObj};
            }
        },
        mounted(){
            // 绑定事件：搜索用户数据
            this.$bus.$on('updateListData' ,this.updateListData);
        }
    }
</script>

<style scoped>
    .album {
        min-height: 50rem; /* Can be removed; just added for demo purposes */
        padding-top: 3rem;
        padding-bottom: 3rem;
        background-color: #f7f7f7;
    }

    .card {
        float: left;
        width: 33.333%;
        padding: .75rem;
        margin-bottom: 2rem;
        border: 1px solid #efefef;
        text-align: center;
    }

    .card > img {
        margin-bottom: .75rem;
        border-radius: 100px;
    }

    .card-text {
        font-size: 85%;
    }
</style>